<template>
  <div id="tab">
    <el-tabs v-model="tab" type="card">
      <el-tab-pane name="Process" :label="$t('Tab.Index.Process')">
        <chart1 :data="props.data1" />
      </el-tab-pane>
      <el-tab-pane name="Target" :label="$t('Tab.Index.Target')">
        <chart2 :data="props.data2" />
      </el-tab-pane>
      <el-tab-pane name="Defect" :label="$t('Tab.Index.Defect')">
        <chart3 :data="props.data3" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import Chart1 from '@/components/tab/chart1.vue';
import Chart2 from '@/components/tab/chart2.vue';
import Chart3 from '@/components/tab/chart3.vue';
import { IChart1Data, IChart2Data, IChart3Data } from '@/interface/index';
import { ref, watch } from 'vue';

const props = defineProps<{
  data1: Array<IChart1Data>;
  data2: Array<IChart2Data>;
  data3: Array<IChart3Data>;
  chosenTab: string;
}>();

const tab = ref('Process');

watch(
  () => props.chosenTab,
  (newVal: string) => {
    tab.value = newVal;
  },
);
</script>

<style lang="scss" scoped>
div#tab {
  height: 100%;
}

:deep(.el-tabs) {
  height: 100%;
  .el-tabs__header {
    .el-tabs__item {
      width: 300px;
      font-size: x-large;
    }
  }
  .el-tabs__content {
    height: 90%;
    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
@/types
